<template>
	<view class="converge" >
		<view
		  :style="{
			  position:'fixed',
		    paddingTop: statusBarHeight + 'px',
		    background: `linear-gradient(to right, rgba(228, 221, 252,${opcity}), rgba(228, 221, 252,${opcity}))`,
		  }"
		  class="navbar"
		>
		  <!-- logo -->
		  <view :style="{ height: navBarHeight + 'px' }" class="logo">
		    <view class="nav-box flex-box">
		    	<view class="lt1 box-1">
		    		<view class="text-a flex-box one-omit" 
					v-if="hasLogin"
		    		:style="{backgroundImage:`url(${appImg+'/pro/t1-bg.png'})`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}">
					<block v-if="shopInfo.edit" >
						<view class="box1 one-omit" @click="show = true">
							<text class="">{{shopInfo.shopname+shopInfo.suffix}}</text>
						</view>
						<image class="hg-img"  src="/static/hg-ico1.png" mode=""></image>
					</block>
					<block v-else>
						<view class="box1 one-omit" >
							<text class="" style="min-width:200rpx;">{{shopInfo.shopname+shopInfo.suffix}}</text>
						</view>
						<image class="hg-img"  src="/static/hg-ico1.png" mode=""></image>
					</block>	
		    		</view>
					<view class="text-a flex-box one-omit"
					v-else @click="onUserInfo"
					:style="{backgroundImage:`url(${appImg+'/pro/t1-bg.png'})`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}">
						<text style="min-width:200rpx;" class="one-omit">请先登录</text> 
						<image class="hg-img"  src="/static/hg-ico1.png" mode=""></image>
					</view>
		    	</view>
		    	<image class="img1"  :src="appImg+'/pro/hm-i1.png'" mode=""></image>
		    	
		    </view>
		  </view>
		
		  <!-- 搜索条 -->
		  <view class="search flex-box">
				<view class="box-1 box3">
					<u--input
						shape="circle"
						placeholder="请输入搜索信息"
						prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399"
						v-model="keyword"
						confirm-type="search" @confirm="searchList"
					></u--input>
				</view>
				<view class="box2" @click="onToOrder">
					<image class="img2"  :src="appImg+'/pro/dd-ico1.png'" mode=""></image>
					订单
				</view>
			
		  </view>
		  <!-- 快捷搜索 -->
		  <view class="huot flex-box">
		  	热搜: 
		  	<scroll-view class="huot-li box-1"  :scroll-x="true">
		  		<text class="h-li" v-for="(item,key5) in hotwordsList" @click="toClassIfySearch(item)" :key="key5">{{item}}</text>

		  	</scroll-view>
		  
		  </view>
		</view>
		<!-- header 背景 -->
		<view class="headerBg">
			<image class="bg"  :src="appImg+'/pro/c-header-bg.png'" mode=""></image>
		</view>
		<view class="banner">
			<swiper radius="10" class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,ids) in swiperList" @tap="jumpType(item,key1)" >
					<image :src="item.imgurl"></image>
					<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 快捷导航 -->
		<view class="qknav">
		   <u-scroll-list indicatorActiveColor="#b6b6b6">
				<view class="scroll-list" style="flex-direction: row;">
					<view
						style="text-align: center;"
						@click="onSearchClassFiy(item.id)"
						class="scroll-list__goods-item"
						v-for="(item, index) in category"
						:key="index"
						:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
					>
						<image class="scroll-list__goods-item__image" :src="item.image"></image>
						<text class="scroll-list__goods-item__text" >{{ item.name }}</text>
					</view>
					<!-- <view class="scroll-list__show-more">
						<text class="scroll-list__show-more__text">查看更多</text>
						<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
					</view> -->
				</view>
			</u-scroll-list>
		</view>
		<view class="clear-both"></view>
		<!-- 我要成为店主 -->
		<image src="https://lirenhui.oss-cn-beijing.aliyuncs.com/static/banner/index-banner.png" class="icon-shopkeeper" mode="widthFix" @tap="jumpType({link_type:3,link:'/pages/joinUs/index'})"></image>
		<!-- 品牌 -->
		<view class="pp-list flex-box">
			<view class="li" v-for="(item,index) in categoryList" @click="toCateoryList(item.id)">
				<image :src="item.logo" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 客服热线 -->
		<view class="serve-hotline" @click.stop="isHotline = false">
			<view class="cu-modal bottom-modal" :class="{'show':isHotline}">
			  <view class="cu-dialog">
					<view class="contact-list">
						<view class="list" >
							<text @click.stop="callPhone(kfInfor.tel)">电话客服{{kfInfor.tel}}</text>
						</view>
						<!-- <view class="list">
							<button open-type="contact" class="custom-button"><text>在线客服</text></button> 
						</view> -->
						<view class="list">
							<text class="btn" style="color:#fff;">取消</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="recommend-info">
			<view class="recommend-title">
				<view class="title">
					<image :src="appImg+'/pro/bt-text1.png'" mode=""></image>
					<view class="text">精选好物，等你来挑选！</view>
				</view>
			</view>
      <view style="margin: 10rpx 0" v-if="showLoading">
        <u-loading-icon text="加载中..." size="20" mode="circle"></u-loading-icon>
      </view>

				<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
					<converge-list v-if="goodsList.length" :tab="2" :list="goodsList" :sw-level="swLevel"></converge-list>
				</mescroll-body>
		</view>
		<!--  1111-->
		<view class="footer-nav">
			<image class="f-ico" @click="kefu" :src="appImg+'/pro/xf-ico1.png'" mode=""></image>
<!--			<image class="f-ico" @click="onToCart" :src="appImg+'/pro/xf-ico2.png'" mode=""></image>-->
		</view>
		
		<!-- 淘店 -->
		<u-popup :show="show" mode="center" bgColor="transparent" @close="close" @open="open">
			<view class="td-bg" :style="{backgroundImage:`url(${comm_img_url+'/pro/tz-bg.png'})`,backgroundSize: '100%',backgroundRepeat: '100% 100%'}">
				<view class="tdConent">
					<input class="td-input" placeholder="请输入店铺名字" @input="changName" type="text" :value="shopName" />
					<view class="btn" @click="upShopInfo">确认</view>
				</view>
			</view>
		</u-popup>
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/TabBar.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from 'vuex'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			TabBar,
		},
		data() {
			return {
        showLoading:false,
				keyword:'',
				shopName:'',
				comm_img_url:'',
				show:false,
				isHotline:false,
				list: [{
					price: '230.5',
					thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
				}, {
					price: '74.1',
					thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
				}, {
					price: '8457',
					thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
				}, {
					price: '1442',
					thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
				}, {
					price: '541',
					thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
				}, {
					price: '234',
					thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
				}, {
					price: '562',
					thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
				}, {
					price: '251.5',
					thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
				}],
				goodsList:[],
				list1:[
					'娇兰','雅诗兰黛','防晒','海兰珠','美丽BB双','爽肤水'
				],
				opcity:0,
				appImg:'',
				statusBarHeight:0,
				menuButtonInfo:0,
				navBarHeight:0,
				// 页面高度
				pageHeight: 500,
				page:1,
				pageSize:20,
				category:[],
				shopInfo:{},
				swiperList:[],
				hotwordsList:[],
				categoryList:[],
				kfInfor:{},
        swLevel:0
			};
		},
		onLoad() {
			this.comm_img_url = this.$c.appImg
			this.appImg = this.$c.appImg
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#0b0b0b',
			})
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.navBarHeight = this.menuButtonInfo.height + (this.menuButtonInfo.top - (this.statusBarHeight || 0)) * 2
			this.getCategory()
			this.getAds()
			this.getScrollTop()
			this.gethotwords()
			this.getBrands()
			this.initData()
		},
		onShow(){
			if(this.hasLogin){
				this.getShopInfo()
			}
			// console.log(this.userInfo)
		},
		onPageScroll(e){
			const scrollTop = e.scrollTop / 100
			this.opcity = Number(scrollTop.toFixed(2)) > 1 ? 1 : Number(scrollTop.toFixed(2))
		},
		onShareAppMessage: function() {
			 return {
				title:this.shopInfo.shopname?this.shopInfo.shopname+this.shopInfo.suffix:'你好，欢迎来到伊姿漾',
				path:'/pages/converge/converge',
				
			 }
		},
				//分享到朋友圈
		onShareTimeline(res) {
			return {
			   title:this.shopInfo.shopname?this.shopInfo.shopname+this.shopInfo.suffix:'你好，欢迎来到伊姿漾',
			   path:'/pages/converge/converge',
			  
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
      kefu(){
        uni.navigateTo({url:'/pages/sub/service/service'})
      },
			initData(){
				this.$u.api.souceKf()
				.then(res=>{
					console.log(res.msg);
					if(res.status){
						this.kfInfor = res.msg
						return 
					}
				})
				.catch(err=>{
					console.log(err);
					uni.showToast({
						icon: 'none',
						title: "网络异常，请稍后"
					})
				})
			},
			changName(e){
				this.shopName = e.detail.value
			},
			callPhone(phoneNumber) {
			  // 判断手机是否支持拨打电话功能
			  if (uni.canIUse('makePhoneCall')) {
				uni.makePhoneCall({
				  phoneNumber: phoneNumber, // 电话号码
				  success: function () {
					console.log('拨打电话成功');
				  },
				  fail: function () {
					console.log('拨打电话失败');
				  }
				});
			  } else {
				console.log('你的设备不支持拨打电话功能');
			  }
			},
			toCateoryList(id){
				uni.navigateTo({url:'/pages/SearchGoodsList/SearchGoodsList?brand_id='+id})
			},
			getBrands(){
				this.$u.api.goodsBrands({cate_id:0}).then(res => {
						if (res.status) {
							this.categoryList = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			/**
			 * 用户信息点击
			 * @param {Number} type
			 */
			onUserInfo(){
			  uni.navigateTo({
			    url: '/pages/login/login'
			  })
			},
			//热搜
			gethotwords(){
				this.$u.api.hotwords().then(res => {
						if (res.status) {
							this.hotwordsList = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			getScrollTop(){
				
				const query = uni.createSelectorQuery()
				query.selectAll('.recommend-info').boundingClientRect((data)=>{
					let pageScrollTop = Math.round(data.top)
					
				})
			},
			
			// 搜索
			searchList(e){
				uni.pageScrollTo({
					scrollTop:500,
					duration:500
				})
				this.mescroll.resetUpScroll() // 重新触发upCallback
				
			},
			// 热搜
			toClassIfySearch(item){
				this.keyword = item
				uni.pageScrollTo({
					scrollTop:500,
					duration:500
				})
				this.mescroll.resetUpScroll() // 重新触发upCallback
			},
			jumpType(item,key) {
				console.log('swperClick')
				var path = item.link;
				if (item.link_type == 1) {
					uni.navigateTo({
						url: "/pages/web-view/web-view?url=" + JSON.stringify(path)
					})
				} else if (item.link_type == 2) {
					uni.switchTab({
						url: path
					})
				} else if (item.link_type == 3) {
					uni.navigateTo({
						url: path
					})
				}
			},
			// 首页广告
			getAds(){
				this.$u.api.souceAds({type:6}).then(res => {
						if (res.status) {
							this.swiperList = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			//店铺信息
			getShopInfo(){
				this.$u.api.shopInfo().then(res => {
					if (res.status) {
						this.shopInfo = res.msg
						this.show = res.msg.show
            this.swLevel = res.msg.sw_level;
					}
          console.log(this.swLevel)
				})
				.catch(err => {
					console.log(err);
				})
			},
			upShopInfo(){
				this.$u.api.shopUpName({name:this.shopName}).then(res => {
					if (res.status) {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							
						});
						this.show = false
						this.getShopInfo()
					}
				})
				.catch(err => {
					console.log(err);
				})
			},
			//商品分类
			getCategory(){
				this.$u.api.goodsCategory().then(res => {
						if (res.status) {
							this.category = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			close(){
				this.show = false
			},
			/**
			 * 我的服务点击
			 */
			onServer(type){
				switch (type){
					
					case 'serve':
						this.isHotline = true;
						break;
				}
			},
			/**
			 * 去订单
			 */
			onToOrder() {
				uni.navigateTo({url:'/pages/MyOrderList/MyorderListConverge'})
			  // this.$f.jump({
			  //   url: '/pages/MyorderList/MyorderListConverge'
			  // })
			},
			/**
			 * 去购物车
			 */
			onToCart() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/account/login'
					})
					return
					
				}
				  uni.navigateTo({
					url: '/pages/cart/cart'
				  })
			},
			/**
			 * 搜索点击
			 */
			onSearchClassFiy(id){
				uni.navigateTo({url:'/pages/SearchGoodsList/SearchGoodsList?id='+id})
			},
			/*上拉加载的回调*/
			  upCallback(page) {
				  console.log(page,'111')
			    //联网加载数据
				  let _this = this
          this.goodsList.length > 0 && (this.showLoading = true)
			    this.$u.api.goodsGoods({page:page.num,id:0,keyword:this.keyword}).then(res=>{
					  console.log(res,'商品列表')
			    	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			    	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
			    	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			    	this.mescroll.endByPage(_this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
			    	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			    	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
			    
			    	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			    	// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
			      
			    	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
			    	// this.mescroll.endSuccess(res.list.length);
            if(page.num == 1){_this.goodsList = []}else{} //如果是第一页需手动制空列表
            this.goodsList=this.goodsList.concat(res.msg.list); //追加新数据
            (this.showLoading = false)
			    }).catch(()=>{
			    	//联网失败, 结束加载
			    	this.mescroll.endErr();
            (this.showLoading = false)
			    })
			  },
		}
	}
</script>

<style lang="scss">
	page{
		background:#f6f7fb;
		.pp-list{
			flex-wrap: wrap;
			margin-bottom:100rpx;
			padding:0 20rpx;
			.li{
				width:25%;
				height:100rpx;
				margin-bottom:20rpx;
				image{
					width:100%;
					height:100rpx;
				}
			}
		}
		.td-bg{
			width:750rpx;
			height:900rpx;
			position:relative;
			.tdConent{
				margin-top:320rpx;
				text-align: center;
				padding-left:10rpx;
				.td-input{
					display: block;
					margin:0 auto;
					width:370rpx;
					height:70rpx;
					line-height: 70rpx;
					text-align: center;
					background-color: #fff;
					border-radius: 45rpx;
					color:#000;
				}
				.btn{
					margin:30rpx auto;
					width:370rpx;
					height:70rpx;
					line-height: 70rpx;
					border-radius: 45rpx;
					text-align: center;
					color:#000;
					background: linear-gradient(to right, #ecd19e, #faefd2);
				}
			}
		}
		/* 客服热线弹窗 */
		.serve-hotline{
			.cu-dialog{
				width: 100%;
				border-radius: 20rpx 20rpx 0 0 !important;
				padding:30rpx 0;
				.contact-list{
					width: 100%;
					.list{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100rpx;
						text{
							color: #222222;
							font-size: 32rpx;
						}
					}
					.btn{
						width:600rpx;
						height:90rpx;
						line-height:90rpx;
						text-align: center;
						color:#fff;
						background:#ae87d8;
						border-radius: 45rpx;
						color:#fff;
					}
				}
			}
		}
		.goods-discounts{
			padding: 0;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			margin: 20rpx;
		}
		.recommend-info{
			position:relative;
			top:-80rpx;
			.recommend-title{
				margin-bottom:30rpx;
				.title{
					text-align: center;
					image{
						width:485rpx;
						height:35rpx;
						display: block;
						margin:0 auto;
						margin-bottom:10rpx;
					}
				}
			}
		}
		.huot{
			padding:20rpx 60rpx;
			color:#998abe;
			margin-top:20rpx;
			.huot-li{
				white-space: nowrap;
				margin-left:25rpx;
			}
			.h-li{
				color:#998abe;
				padding:0rpx 15rpx;
				background-color: #f2e9fc;
				margin-right:20rpx;
				border-radius: 30rpx;
			}
		}
		
		/* 自定义导航条 */
		.navbar {
		  position: fixed;
		  z-index: 9;
		  width: 100%;
		  display: flex;
		  flex-direction: column;
		  padding-top: 20px;
		  // background: linear-gradient(to right, rgb(233, 48, 77), rgb(122, 27, 185));
		  .logo {
		    display: flex;
		    align-items: center;
		    height: 64rpx;
		    padding-left: 30rpx;
		  }
		  .search-wrap {
		    display: flex;
		    align-items: center;
		    width: 100%;
		    padding-right: 30rpx;
		  }
		 
		}
	}
	.converge{
		.clear-both{
			margin-top:-120rpx ;
			height: 1px;
			width: 100%;
		}
		.icon-shopkeeper{
			width: 700rpx;
			display: block;
			margin:20rpx auto ;
			height:auto;
		}
		.footer-nav{
			position:fixed;
			right:20rpx;
			bottom:200rpx;
			.f-ico{
				display:block;
				width:84rpx;
				height:84rpx;
				margin-bottom:10rpx;
			}
		}
		.qknav{
			padding:20rpx 0;
			background:#fff;
			position:relative;
			top:-120rpx;
			width:690rpx;
			box-sizing: border-box;
			margin:0 auto;
			border-radius: 10rpx;
			.scroll-list {
				@include flex(column);
				
				&__goods-item {
					margin-right: 20px;
					// margin-left:10rpx;
					&__image {
						width: 50px;
						height: 50px;
						border-radius: 50%;
					}
			
					&__text {
						color: #353535;
						text-align: center;
						font-size: 24rpx;
						margin-top: 5px;
					}
				}
			
				&__show-more {
					background-color: #fff0f0;
					border-radius: 3px;
					padding: 3px 6px;
					@include flex(column);
					align-items: center;
			
					&__text {
						font-size: 12px;
						width: 12px;
						color: #f56c6c;
						line-height: 16px;
					}
				}
			}
		}
		
		.search{
			margin-top:20rpx;
			// background:#fff;
			padding:0 60rpx;
			color:#998abe;
			.box3{
				background: #fff;
				border-radius: 40rpx;
			}
			.box2{
				margin-left:30rpx;
				.img2{
					width:36rpx;
					height:37rpx;
					display: block;
					margin:0 auto;
					margin-bottom:10rpx;
				}
			}
		}
		.nav-box{
			justify-content: space-between;
			color:#998abe;
			position:relative;
			.img1{
				position:absolute;
				left:0;
				width:71rpx;
				height:66rpx;
				margin-bottom:10rpx;
			}
			.lt1{
				margin-left:40rpx;
				.text-a{
					min-width:325rpx;
					height:54rpx;
					padding-left:40rpx;
					font-weight: bold;
					color:#000;
					
				}
			
				.hg-img{
					width:38rpx;
					height:34rpx;
					margin:0 10rpx;
				}
			}
			.lt2{
				.box1{
					text-align: center;
					width:100rpx;
					.img2{
						width:40rpx;
						height:40rpx;
						display: block;
						margin:0 auto;
					}
				}
			}
		}
		// padding-top:150rpx;
		.headerBg{
			width:750rpx;
			height:500rpx;
			.bg{
				width:100%;
				height:100%;
			}
		}
		/* banner */
		.banner{
			position:relative;
			top:-120rpx;
			width:690rpx;
			height: 330rpx;
			margin:0 auto;
			margin-bottom: 30rpx;
			// margin: -200rpx auto 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			.screen-swiper{
				height: 100%;
				min-height: 100% !important;
				image{
					height: 330rpx;
					border-radius: 20rpx;
				}
			}
		}
		
	}
</style>
